VS Code에서 Codex를 사용하면서, Figma MCP(Model Context Protocol) 서버를 연동해 디자인 컨텍스트를 코드 작성에 직접 활용하는 환경을 구성했다. 이 설정을 통해 다음과 같은 작업이 가능해진다.Figma 디자인 정보를 에이전트 프롬프트에서 직접 참조디자인 기반 컴포넌트/레이아웃 코드 생성 자동화디자이너–개발자 컨텍스트 전환 비용 감소1. 사전 준비1-1. Figma Desktop App에서 OAuth 토큰 발급Figma Desktop App에서 MCP 연동용 토큰을 발급한다.1-2. 환경 변수로 토큰 등록발급받은 토큰을 환경 변수로 등록한다.~/.zshrc 파일에 아래 내용을 추가하고 저장한다.export FIGMA_OAUTH_TOKEN='발급 받은 토큰' 변경 사항을 ..

1. 제이콥의 법칙(Jakob’s Law) 사용자는 새로운 서비스를 마주했을 때, 완전히 처음 보는 눈으로 인터페이스를 바라보지 않는다. 이미 다른 서비스에서 익숙해진 패턴을 기준으로 새로운 시스템을 이해하려 한다. 대표적인 예가 쇼핑 앱의 장바구니 아이콘 위치다. 대부분의 쇼핑 앱에서 장바구니 아이콘은 오른쪽 상단에 배치되어 있다. 사용자는 여러 서비스를 경험하며 이미 “오른쪽 상단 = 장바구니” 라는 패턴을 학습했다. 그래서 새로운 쇼핑 서비스를 접해도, 사용자는 설명을 읽기 전에 본능적으로 오른쪽 상단을 먼저 바라본다. 사용성 전문가 제이콥 닐슨(Jakob Nielsen) 은 “사용자는 대부분의 시간을 다른 시스템에서 보낸다.” 라고 말하며, 새로운 시스템 역시 사용자가 이미 익숙한 방식으로 동작하..

이번 3편에서는 Emotion이 제공하는 글로벌(Global) 스타일링 기능을 다뤄본다.1. 글로벌 스타일링은 언제 사용될까?일반적으로 Emotion의 css 또는 styled는 컴포넌트 단위(local)로 스타일을 적용한다.하지만 프로젝트를 개발하다 보면, 특정 스타일을 HTML 전체에 전역적으로 적용하고 싶을 때가 있다.예를 들어,전체 페이지 기본 폰트 설정 (@font-face)reset/normalize 스타일 적용body 또는 html 레벨의 배경/레이아웃 스타일scrollbar, selection, root-level CSS 변수이런 스타일은 컴포넌트 바깥에서도 적용되어야 하므로 Global 컴포넌트가 필요하다.2. Global 스타일은 mount/unmount 시 자동 관리된다Emotion ..

이번 2편에서는 Emotion에서 제공하는 두 가지 스타일 선언 방식, css함수 또는 styled 함수를 비교해 보고, 실제 개발에서 어떻게 선택하게 되는지 정리해보려고 한다.둘 다 CSS-in-JS 방식을 기반으로 하지만, 사용 목적과 경험은 꽤 다르다.1) css 함수 — 스타일을 빠르게 생성하고 유연하게 사용하는 방식css 함수는 스타일 자체를 하나의 유닛처럼 다루는 방식이다.import { css } from '@emotion/react';const cardStyle = css({ padding: 16, borderRadius: 8, background: '#fafafa',});이렇게 정의한 스타일은 css prop 또는 className에 바로 적용할 수 있다.css 함수는 다음과 같은 ..

최근 한 경험을 바탕으로 Emotion.js의 여러 기능을 다시 짚어볼 필요가 있다고 느꼈다. 그래서 Emotion 톺아보기 시리즈를 시작한다. 첫 주제는 가장 기본적이면서도 핵심인 “css 함수의 사용”이다.기존 방식: className + 외부 CSS일반적인 CSS 사용 흐름은 컴포넌트에 className을 붙이고, 외부 스타일시트에 해당 클래스를 정의한다.css.example { background: #f5f5f5; padding: 12px 16px; border-radius: 8px;}이 방식은 익숙하지만 단점이 있다.스타일이 컴포넌트 밖으로 흩어져 관리 포인트가 증가상태/조건에 따라 스타일이 바뀌면 클래스 분기 로직이 복잡전역 네이밍이라 클래스 이름 충돌 가능성 존재그래서 Emotion에서..

프로젝트를 할 때마다 똑같은 ESLint/Prettier 설정을 반복해서 적용하는 건 시간이 많이 들고 비효율적이다. 그래서 이를 패키지화해 두면 필요할 때 간단히 설치해서 재사용할 수 있다. 나는 이를 위해 GitHub Packages를 활용해 환경을 구성해 보았다.1. GitHub Repository 생성먼저 새 레포를 만든다. (예: eslint-config-lonnie)2. GitHub Token 발급GitHub Packages에 배포하려면 Personal Access Token이 필요하다.GitHub 우측 상단 Avatar → Settings → 좌측 하단 Developer settingsPersonal access tokens → Tokens (classic) → Generate new tok..

최근 Vite로 프로젝트를 만들고 enum을 쓰려고 했는데, tsconfig.app.json 에서 erasableSyntaxOnly 옵션 때문에 에러가 났다. 그래서 이 옵션에 대해서와 enum을 대신할 방법을 정리해보려고 한다.1. erasableSyntaxOnly?TypeScript 5.8부터 도입된 옵션으로, 컴파일 후 런타임 코드에 남는 문법을 허용할지 여부를 결정한다.런타임에 영향을 주는 문법에는 enum, namespace, class 등이 포함된다.옵션별 동작값 동작 특징true (기본값)타입 전용 문법만 허용enum 같은 런타임 구문은 사용하면 에러 발생false런타임 문법도 허용enum 사용 가능, 하지만 JS 번들에 코드가 남아 트리쉐이킹에 불리예시// ❌ erasableSyntaxOn..

개발을 하면서 나는 “나는 UX를 고려하고 있다”라고 하지만, 실제로 UX에 대해 잘 알고 있을까 하는 의문이 들었다.자연스럽게 사용자의 경험을 고려하고는 있지만, 어떤 기반이 되는 지식은 부족하다고 생각이 들었다.그래서 UX에 대해 공부를 시작하기로 했고, 이 글은 그 첫걸음이라고 볼 수 있다. 좋은 사용자 경험을 주기 주기 위해 무엇을 고려해야 할까?딱 네 가지만 기억해도 사용자에게 충분히 좋은 경험을 전달할 수 있다. 첫 번째는 Usable 즉, '사용 가능한가' 이다. 제품이 사용 가능하다는 것은 제품의 디자인, 구조, 목적이 명확하고 사용하기 쉽다는 것을 의미한다. 제품의 UX 사용성을 평가할 때 다음과 같은 질문을 해볼 수 있다.모든 요소를 쉽게 찾을 수 있는가?기능을 이해하기 쉬운가?사용자가..

조직 문화에 대해서 리서치를 하던 중에, 버스 팩터(Bus factor)라는 재밌는 용어를 보게 되어서 정리해보고자 한다. 버스 팩터(Bus Factor)? 먼저 버스 팩터는 소프트웨어 개발 또는 프로젝트 관리에서 사용되는 용어로 특정한 개발자나 팀 멤버가 얼마나 중요한 역할을 하는지를 나타내는 지수이다. 트럭 팩터(Truck Factor) 또는 로또 팩터(Lottery Factor)라고도 하며, 간단히 얘기해서 몇 명의 팀 멤버가 버스에 치여서 죽거나 크게 다쳤을 때 프로젝트가 망하게 되는지를 나타낸다. 이 지수가 높을수록 대체로 프로젝트의 안전성이 높아진다. 예를 들어 버스 팩터가 1이라면 팀 멤버 중 한 명만 빠져도 프로젝트에 문제가 생기는 경우이다. 반대로 팩터가 100이라면 100명이 빠져야 비..

2022년 5월 이전 직장을 퇴사하고, 5월 초 세이지리서치라는 회사에 MlOps Solution Frontend Developer 직무로 면접을 보게 되었다. 정확히는 퇴사 전에 면접을 본 거긴 하지만.. ㅎㅎ 세이지리서치의 전형은 서류 전형, 전화 면접, 기술 면접, 컬처핏 면접을 순서로 진행되었고, 조금 특이한 부분은 기술 면접과 컬처핏 면접을 같은 날에 진행한다는 것이었다. 처음 서류 전형을 운좋게..? 통과하고, 전화 면접을 진행하게 되었고 이 또한 좋게 봐주신 덕분에 통과하게 되었다. 그리고 대망의 기술 면접 날 세이지리서치에 처음 입성하게 되었는데, 회사 인테리어가 아주 깔끔하고 풍기는 분위기가 매력적인 장소라는 생각이 들었다. 세이지리서치 기술 면접을 볼 때는 아는 부분에 대해서 설명을 못..